我站原创视频教程，网上视频教程学校，仅需要一个耳机+远程即可完成所有教学任务。

题 目:用Flash打造迷你Winamp播放器(1)

Winamp是PC上使用率比较高的一款音频播放器，以其短小精悍的身材和系统资源占用低的优点，深受大家的喜爱。作为一名闪客同时又为音乐发烧友的我，自然而然的就想到了利用闪客手中的利器—Flash,来动手自己制作一个模拟的迷你Winamp来，想想使用自己打造出的精美播放器，欣赏着优美的旋律，那情景是多么悠然自得啊。(本例源文件请点击这里下载)所有  热点网络 热点下载  热点网络学院  版权所有=


废话少说，说作就做，不过在和大家一起制作之前，前来看一下最后的制作成品，以便使大家在下面的制作过程中能做到心中无数，免得到时候手忙脚乱，最后完成的播放器界面如图1所示：


图1

从图一中我们看到，此款播放器的界面可以说非常漂亮，左下角是一排播放按钮，最左边的孔形按钮可以进行精简界面和完整界面之间的切换，接下来的五个按钮大家应该很熟悉了，作用分别是前一首歌曲，播放，暂停，关闭，下一首歌曲。右下方的文字是播放曲目的提示，可以显示出所播放的是哪首歌曲。最酷的要算占据播放器界面主要位置的光谱柱了，可以随着音乐的节奏跳跃，更绝的是我们可以使用鼠标对播放器的整体进行拖动，可以将其放置到任意位置，简直和Winamp是一模一样。看到这里大家一定按捺不住了吧，别着急，让我们一步一步来制作这个精美的播放器。

1.首先启动Flash MX,并新建一个影片文件，对影片属性进行设置，设置影片大小为600px*400px(单位为象素)，影片背景色为黑色。

2．首先我们要制作的是控制音乐播放的五个按钮，首先来制作最左边的前一首歌曲按钮。新建立一个按钮元件，并命名为back,进入按钮元件的编辑区后，先使用矩形工具绘制一个无填充色的正方形，然后使用直线工具绘制一条细的竖线，并在旁边绘制一个小的三角形，最后给三角形和轮廓线上色，颜色代码为#CCCCFF，最后做好的按钮如图2所示：


图2

按照相似的方法，分别制作其它4个按钮，并命名为forward,play,stop和pause,制作完成后的按钮如图3中从左到右所示：


图3

最后还需要绘制一个最小化按钮，同样新建一个按钮元件，命名为minimize,进入元件的编辑区后，使用绘图工具绘制如图4所示的按钮：

图4
3．播放器主界面的背景是利用一块填充了渐变色的色块形成的，制作起来非常简单，但是如果能够很好的设计填充色，最后的效果一样很酷。新建一个图形元件，命名为backpanel,进入元件的编辑区后，在当前的图层layer1上面使用矩形工具绘制一个横向的细长矩形，然后打开混色器面版，按照图4所示的填充色设置方法对其进行填充，如图5所示：


图5

再新建一个图层Layer2,在其上绘制一个较大的矩形，并位于图4中矩形的上部，按照相同的填充设置对其进行填充，图4中的细条矩形用来放置播放控制按钮，而这个较大的矩形是用做播放器的光谱柱效果的背景，最后如图6所示：


图6

4．接下来需要制作播放器中声音的存储部分了，播放器实现的播放不同音乐的原理是：在制作过程中事先导入一定数量的音乐，然后将所以音乐插入到不同的帧中，通过播放按钮来控制跳到不同的帧播放，即实现了不同音乐之间的切换。

本例中我们先导入track1,track2和track3三支音轨到影片中，然后新建一个影片剪辑，命名为tracks mc,进入元件编辑区后，将图层中前四帧空下，在第5帧插入关键帧，给此帧添加帧标签，并添加Action动作脚本：stopAllSounds();意思是如果播放到此帧，既停止播放所有声音。

在第10帧插入关键帧，将track1引入到此帧，并设置此帧的帧标签为track1,同样的在第20和第30帧分别插入关键帧，分别引入track2和track3,然后分别设置帧标签为track2和track3,这里设置帧标签的作用是不必规定具体哪帧引入的音乐，只要访问相应帧标签代表的帧，就可以播放相应的音乐了，设置完成后时间轴如图7所示：


图7

如果你想在播放器中预先添加更多的声音，只需要将其导入，然后在后面继续添加关键帧，将相应的声音导入并设置好帧标签即可。

5．接下来就需要制作播放器的主界面了，新建一个影片剪辑，命名为mainpanel,进入元件的编辑区后，自上而下建立四个图层，分别命名为label,actions. Drgbtn和backpanel。

首先在图层label的第1和第3帧分别设置帧标签为init和play.也即第1帧用来初始化播放器，从第3帧开始进行播放。所有  热点网络 热点下载  热点网络学院  版权所有=


因为我们的播放器可以让用户自由的拖动，所以需要在整个播放器上面放一个隐形按钮，从而实现对播放器的拖动，我们先制作好这个隐形按钮，然后拖动进来，如图8所示：

图8
隐形按钮左下角的缺口是为了留给播放控制按钮，因为如果在此处是不能对播放器进行拖动的，最后给隐形按钮添加Action控制脚本：

on (press) {

startDrag("../../cleoplayer");

}

//当按下此按钮后，即可对主场景中的cleoplayer进行拖动，也就是我们最后的播放器

on (release) {

stopDrag();

}

//当释放鼠标后，停止拖放

6．回到图层backpanel,将元件tracks mc拖进编辑区，给其设置实例名为tracks,然后分别将元件backpanel以及5个播放按钮拖进编辑区，调整其位置并将图层drgbtn暂时隐藏后如图9所示：


图9

然后给最小化按钮添加Action动作脚本：

on (release) {

tellTarget ("../") {

play();

}

//这里其实是跳到后面的元件player中，元件player实现的就是面板的缩放

}

给前一首按钮添加脚本：

on (release) {

if (Number(playtrack)>1) {

playtrack = playtrack-1;

//首先判断当前播放的是不是第一首，如果不是，将当前播放曲目的信息减一

if (action eq "play") {

status = "playing tr. " add playtrack;

//如果播放按钮已被按下，则曲目信息文本框中显示曲目的名称

tellTarget ("tracks") {

stopAllSounds();

gotoAndStop("track" add ../:playtrack);

}//首先停止正在播放的音乐，然后播放前一首音乐

gotoAndPlay("play");

} else {

status = "stoped tr. " add playtrack;

//设置当前播放状态

}

}

}

给播放按钮添加脚本：

on (release) {

scale = "99";//缩放比率

action = "play";//播放状态

down = "3";

status = "playing tr. " add playtrack;

//当按下播放按钮后，对上面一些变量进行初始化，以便在其它程序段中根据变量值执//行相应的命令

tellTarget ("tracks") {

gotoAndStop("track" add ../:playtrack);

}

//跳到tracks中的含有音乐的那帧并播放

play();

}

给暂停按钮添加脚本：

on (release) {

if (action eq "pause") {

action = "play";

//如果已经处于暂停状态，再此按钮后，就变为播放状态

status = "playing tr. " add playtrack;

tellTarget ("tracks") {

gotoAndStop("track" add ../:playtrack);

}//开始播放音乐

play();

} else {

if (action eq "play") {

action = "pause";

//如果当前状态是播放状态，则按下后处于暂停状态

status = "paused tr. " add playtrack;

tellTarget ("tracks") {

gotoAndStop("stop");

}//停止播放所有声音

stop();

}

}

}

给退出按钮添加脚本：

on (release) {

action = "stop";

scale = "0";

down = "9";

status = "stoped tr. " add playtrack;

//和播放按钮相似，当退出后，也对同样的变量进行赋值

tellTarget ("tracks") {

gotoAndStop("stop");

}//停止播放音乐

play();

}

给下一首按钮添加脚本：

on (release) {

if (Number(playtrack)

playtrack = Number(playtrack)+1;

//如果播放曲目没有到达最后一首的化，将曲目信息值增一

status = "playing tr. " add playtrack;//同时设置当前播放状态

if (action eq "play") {

tellTarget ("tracks") {

stopAllSounds();

gotoAndStop("track" add ../:playtrack);

}//如果当前处于播放状态，则先停止所有声音，然后再开始播放下//一首所指定的音乐

gotoAndPlay("play");

} else {

status = "stoped tr. " add playtrack;

}

}

}

7．因为播放器在播放中随机的显示光谱柱，所以需要先制作两个光谱单元，然后通过Action动作脚本对其跳动的方式和频率进行控制。所以分别新建两个影片剪辑，命名为graph bar和graph dot,绘制后如图10所示：


图10

将上面两个光谱单元放到播放界面靠左的位置，分别命名为line和topdot,播放中因为可以显示播放歌曲的信息，所以还需要一个动态文本框来实现。使用文本工具在播放按钮右边绘制两个文本框，其中靠右边的设置为动态文本框，并设置其变量名为status，如图11所示：


图11

8．最后就需要添加关键的Actinon动作脚本了，回到图层Avtions,在第1帧添加如下Action:

down = 3;

scale = 99;

pause = "no";

playtrack = 1;

action = "play";

maxtracks = 3;

//设置一系列变量

在第2帧添加如下Action:

if (action eq "play") {

actiontxt = "playing tr. ";

status = actiontxt add playtrack;

tellTarget ("tracks") {

gotoAndStop("track" add ../:playtrack);

}//如果当前处于播放状态，则设置当前曲目信息文本框中的值为所播曲目，并且播//放当前的曲目

gotoAndPlay("play");

} else {

scale = "0";

down = "9";

actiontxt = "stoped tr. ";

status = actiontxt add playtrack;

gotoAndStop("play");

}//如果当前播放器不处于播放状态，则设置当前状态为播放
在第3帧添加如下Action:

setProperty("line", _visible, "0");

setProperty("topdot", _visible, "0");

//首先将光谱柱单元设置为不可见

maxlines = 40;//此变量值代表所复制出光谱柱的最大个数

alpha = 100/maxlines;// 光谱柱的透明度

atmp = 20;

i = 0;

//设置一系列变量

while (Number(i)<=Number(maxlines)) {

//变量I从0开始，如果没有到达40,则循环进行下面的脚本

newy = 1+Number(random(scale));

duplicateMovieClip("line", "line" add i, 100+Number(i));

//复制出长条形的光谱柱，依此命名为line+I的形式

setProperty("line" add i, _x, Number(-120)+Number(i*7));

setProperty("line" add i, _y, 25);

setProperty("line" add i, _yscale, newy);

setProperty("line" add i, _alpha, atmp);

//上面四句分别设置所复制出的光谱拄的坐标，透明度和纵向缩放比率

duplicateMovieClip("topdot", "topdot" add i, 200+Number(i));

//复制光谱柱上面的小方块，依此命名为topdot+I的形式

setProperty("topdot" add i, _x, Number(-120)+Number(i*7));

setProperty("topdot" add i, _y, 23-newy/2);

set("doty" add i, newy);

setProperty("topdot" add i, _alpha, atmp);

//设置复制出的小方块的坐标和透明度值

if (Number(i)>=Number(maxlines/2)) {

atmp = atmp-alpha;

} else {

atmp = Number(atmp)+Number(alpha);

}

i = Number(i)+1;

}//上面的脚本作用为复制40个光谱柱单元，然后分别设置其相应属性，使其能排列成一排

在第4帧添加如下Action:

i = 0;

//初始化变量I的值为0

while (Number(i)<=Number(maxlines)) {

newy = 1+Number(random(scale));

//当I的值小于前面设置的变量maxline时，也就是还没有设置所有的光谱柱，下面就//将分别进行设置

setProperty("line" add i, _yscale, newy);//设置每一个光谱柱的垂直缩放比例为newy,

if (newy >= eval("doty" add i)) {

set("doty" add i, newy);
//如果垂直缩放比例的值

} else {

set("doty" add i, eval("doty" add i)-down);

}

setProperty("topdot" add i, _y, 23-Eval("doty" add i)/2);

i = Number(i)+1;

}

//三四帧主要用来实现播放器中的光谱柱长度在纵向随机变化的效果

在第5帧添加如下Action:

gotoAndPlay(_currentframe-1);

//循环执行第4帧

最后的时间轴如图12所示：


图12

9．到这里，整个播放器就基本上完成了，现在可以试着发布一下，看看效果怎么样。不过在结束之前，我们再来完美一下这个播放器，给她添加上界面伸缩功能，也就是可以在精简面板和完整面板之间切换，和真正的Winamp很类型。

新建一个影片剪辑，命名为player,进入元件的编辑区后，添加两个图层，在上面的图层中绘制一个矩形，然后将其转换为影片剪辑元件，分别在第1帧和第15帧插入关键帧，设置帧标签为full和min,分别代表完整播放面板和精简播放面板，然后给两帧都添加Action:stop();.

将元件mainpanel拖到下面的图层中，分别在第15帧和第30帧插入一个关键帧，回到第15帧，将元件mainpanel向上拖动一段距离，直到只有播放控制按钮留在矩形框中为止，如图13所示：


图13

最后只要建立第1到第15,第16到第30帧之间的运动过渡动画即可。然后将上面的图层设置成遮罩层，就实现了面板伸缩的功能。

最后的任务就是将元件player拖到场景中，然后发布最后的影片，看看实际效果如何。倾听着自己动手制作的播放器，是不是别有一番风味。

省级FLASH课件制作培训请加我站管理QQ444860709 培训QQ专业群67042004。

FLASH8.0教程→ flash cs3视频教程 flashcs3教程 flash cs3教程下载 flashcs3视频教程 flash cs3 pro教程 flash cs3教程网 flash cs3 实例教程 flashcs3教程下载 flash cs3教程 pdf flash cs3按钮教程